<template>
  <div class="search-house">
    <form action="/">
      <van-search ref="search"
        v-model="value"
        background="#fff"
        placeholder="请输入楼盘名称"
        show-action
        @search="onSearch"
        @cancel="onCancel"
      >
        <div slot="left-icon" class="left-icon">
          <span @click="setCity" style="color: #40516F;">{{ marketCity.city }}</span>
          <span class="arrow back-image"></span>
          <span class="border-left"></span>
          <span class="search back-image"></span>
        </div>
      </van-search>
    </form>
  </div>
</template>

<script>
import isEmpty from 'lodash/isEmpty'
export default {
  data() {
    return {
      value: '',
      marketCity: null
    }
  },
  watch: {
    $route(val) {
      let { page } = val.query
      if (page === 'search') {
        let element = this.$refs.search.$el.getElementsByTagName('input')[0]
        setTimeout(() => {
          element.focus()
        }, 300)
      }
    }
  },
  created() {
    let zipData = window.localStorage.getItem('marketCity')
    this.marketCity = JSON.parse(zipData)
    if (isEmpty(this.marketCity)) {
      this.marketCity = {
        city: '北京市',
        type: 2
      }
    }
  },
  mounted() {
    
  },
  methods: {
    setCity() {
      this.$router.push({ name: 'city-list', query: { fromPage: 'market', searchContent: this.marketCity.city, category: 0 } })
    },
    onSearch() {

    },
    onCancel() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>

.back-image{
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
}

.search-house{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  /deep/ .van-cell {
    background-color: #f2f6f7;
  }
  .left-icon {
    .arrow {
      height: 24px;
      width: 20px;
      vertical-align: bottom;
      display: inline-block;
      background-image: url('../../../assets/img/market/list__arrow_@2x.png');
    }
    .border-left {
      padding: 8px 0;
      vertical-align: middle;
      display: inline-block;
      border-right: 1px solid #9ca5b5;
    }
    .search {
      height: 24px;
      width: 20px;
      vertical-align: bottom;
      display: inline-block;
      background-size: cover;
      background-image: url('../../../assets/img/market/Group 3@2x.png');
    }
  }
}
</style>